<template>
  <div class="preface-box">
    <div class="preface-reative">
      <div class="preface-content-shadow" @click="clickPath" style="cursor: pointer"></div>
      <div ref="prefaceLeft">
        <img
          class="preface-img t-image--fit-cover t-image--position-center"
          :src="$filters.getLinkUrl(props.info.value + '?imageView2/3/w/1440/h/542/format/webp')"
          alt=""
          v-if="props.info.value"
        />
        <!-- <t-image
          class="preface-img"
          src="http://101.34.143.36:8890/api/image/387939155165253/h_542,w_1440"
          alt=""
          v-else
        /> -->
        <UnitImageNull v-else></UnitImageNull>
      </div>

      <div ref="prefaceRight" class="preface-content">
        <div class="preface-right-content">
          <titles :title="props.info.text" />
          <div class="subTitle" v-if="props.info.subTitle">——{{ props.info.subTitle }}</div>
          <span
            v-html="getTextHtmlBr(props.info.remarks)"
            class="left-title"
            :style="{
              fontSize: store.styleInfo.contentSize,
              color: '#fff',
            }"
          ></span>
          <div
            @click="clickPath"
            :style="{
              fontSize: store.styleInfo.mintitleSize,
              color: '#fff',
            }"
            class="left-btn flex-c-c-c"
          >
            <div class="btn-img">
              <buttonIcon />
            </div>
            <span>查看全部</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { getTextHtmlBr } from '@/utils/minxin';
import { pathList, pathListLoop } from '../route';
import { ref, onMounted } from 'vue';
import titles from '@/components/title/title.vue';
import buttonIcon from '@/components/title/buttonIcon.vue';
import { useProjectStore } from '@/store';
import { urls } from '@/utils/request/upload';
import { useRouter, useRoute } from 'vue-router';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';
const prefaceLeft = ref(null);
const prefaceRight = ref(null);
const props = defineProps({
  info: {
    type: Object,
  },
});
const htmlContent = ref('');
if (props.info.remarks) {
  let arr = props.info.remarks.split('\n');
  arr.forEach((el) => {
    if (el) {
      htmlContent.value =
        htmlContent.value +
        `<span>
${el}
</span>`;
    }
  });
}

const store = useProjectStore();
const router = useRouter();
const route = useRoute();
const clickPath = () => {
  //console.log('789');

  store.setchildModel(props.info);
  store.setCurrent(0);
  router.push({
    name: route.meta.loopType ? pathListLoop[8] : pathList[8],
    query: { childId: props.info.id },
  });
};
const animation = () => {
  const observer = new IntersectionObserver((entries) => {
    let canTrigger = true; // 标记是否可以触发
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        // 当元素进入视窗口时触发的代码
        prefaceLeft.value.classList.add('animation-box4');

        //console.log('1111');
        // 设置一个延迟时间，防止频繁触发
        canTrigger = false;
        setTimeout(() => {
          canTrigger = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
        // if (prefaceLeft.value) {
        //   prefaceLeft.value.classList.remove('animation-box4');
        // }
      }
    });
  });
  observer.observe(prefaceLeft.value);
};
const animation2 = () => {
  const observer = new IntersectionObserver((entries) => {
    let canTrigger = true; // 标记是否可以触发
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        // 当元素进入视窗口时触发的代码
        setTimeout(() => {
          prefaceRight.value.classList.add('animation-box4');
        }, 1000);
        //console.log('22222');

        // 设置一个延迟时间，防止频繁触发
        canTrigger = false;
        setTimeout(() => {
          canTrigger = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
        // if (prefaceRight.value) {
        //   prefaceRight.value.classList.remove('animation-box4');
        // }
      }
    });
  });
  observer.observe(prefaceRight.value);
};
onMounted(() => {
  animation();

  animation2();
});
</script>

<style lang="less" scoped>
@import './index.less';

.preface-box {
  width: 100%;

  .preface-img {
    width: 100%;
    height: auto;
    height: 576px;
    transition: all 0.5s;
    object-fit: cover;
  }
  :deep(.box) {
    height: 576px;
  }
  .t-image {
    object-fit: cover;
  }
}
.preface-reative {
  height: 576px;
  position: relative;
  // width: 1440px;
  overflow: hidden;
}
.preface-content-shadow {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 55;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  width: 100%;
  height: 576px;
}
.preface-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1180px;
  z-index: 66;
  margin: auto;
  opacity: 0;
  :deep(.title-boxs-item) {
    color: #ffffff !important;
  }
  .preface-right-content {
    width: 680px;
    // margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.left-title {
  // text-align: center;
  text-indent: 2em;
  width: 100%;
  font-size: 16px;
  line-height: 32px;
  // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  font-weight: 500;
  color: #ffffff;
  // text-shadow: 0px 0px 32px rgba(0, 0, 0, 0.8);
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 5; //行数
  line-clamp: 5;
  margin: 32px 0;
  margin-bottom: 0px;
  -webkit-box-orient: vertical; //盒子中内容竖直排列
}
.hw-wrap-spases {
  display: flex;
  flex-direction: column;
  :deep(span) {
    display: flex;
    text-indent: 2em;
    text-align: justify;
  }
}
.preface-right {
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
}
.preface-reative:hover .preface-img {
  transform: scale(1.1);
}
img {
  object-fit: cover !important;
}
.subTitle {
  color: #ffffff;
}
</style>
